<template>
	<el-dialog
		:visible="true"
		width="90%"
		:destroy-on-close="true"
		class="rempadding"
		:before-close="handleClose"
	>
		<div slot="title" class="dialog-title">
			<span class="title-text" style="margin-right: 15px">
				{{ $t('funds.proxy_member_funds_record.members')
				}}{{ rowVal.memberAccount
				}}{{ $t('risk.return_member_forzen_detail') }}
			</span>
		</div>
		<el-table
			v-loading="loading"
			size="mini"
			border
			show-summary
			:data="tableData"
			class="small-size-table"
			style="margin-bottom: 15px"
			:header-cell-style="getRowClass"
			element-loading-spinner="el-icon-loading"
			:summary-method="
				(val) =>
					handleDialogRow(
						val,
						summary
					)
			"
		>
			<el-table-column
				prop="noteNumber"
				align="center"
				:label="$t('funds.proxy_member_funds_record.note_number')"
			>
				<template slot="header">
					{{ $t('funds.proxy_member_funds_record.note_number') }}
					<el-tooltip class="tips-box" effect="dark">
						<i class="el-icon-question fz14"></i>
						<div slot="content">
							{{ $t('risk.memer_frozen_rebate_record_detail_tips') }}
						</div>
					</el-tooltip>
				</template>
				<template slot-scope="scope">
					<Copy
						v-if="!!scope.row.noteNumber"
						:title="scope.row.noteNumber"
						:copy="copy"
					>
						{{ scope.row.noteNumber || '-' }}
					</Copy>
					<span v-else>-</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="venueName"
				align="center"
				:label="$t('funds.proxy_member_funds_record.venue_name')"
			>
				<template slot-scope="scope">
					{{ scope.row.venueName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="gameTypeName"
				align="center"
				:label="$t('funds.proxy_member_funds_record.game_name')"
			>
				<template slot-scope="scope">
					{{ scope.row.gameTypeName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="createAt"
				align="center"
				:label="$t('funds.proxy_member_funds_record.bet_time')"
			>
				<template slot-scope="scope">
					{{ scope.row.createAt || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="validBetAmount"
				align="center"
				:label="$t('report.valid_bet_amount')"
			>
				<template slot="header">
					{{ $t('report.valid_bet_amount') }}
					<el-tooltip class="tips-box" effect="dark">
						<i class="el-icon-question fz14"></i>
						<div slot="content">
							{{ $t('risk.risk_valid_bet_amount_tips') }}
						</div>
					</el-tooltip>
				</template>
				<template slot-scope="scope">
					${{ scope.row.validBetAmount }}
				</template>
			</el-table-column>
			<el-table-column
				prop="rebateRate"
				align="center"
				:label="$t('funds.proxy_member_funds_record.rebate_ratio')"
			>
				<template slot-scope="scope">
					<span>{{ handlePercentage(scope.row.rebateRate) }}</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="rebateAmount"
				align="center"
				:label="$t('member.personal_frozen_rebate')"
			>
				<template slot-scope="scope">
					{{ handleCurrency(rowVal.currency) }}
					{{ handleNumber(rowVal.currency, scope.row.rebateAmount) }}
				</template>
			</el-table-column>
		</el-table>
		<div slot="footer" class="dialog-footer">
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size.sync="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</div>
	</el-dialog>
</template>
<script>
import list from '@/mixins/list'
import summaryList from './summaryList'
export default {
	mixins: [list, summaryList],
	props: {
		rowVal: {
			type: Object,
			default: () => {}
		},
		closeDialog: {
			type: Function,
			default: () => {}
		}
	},
	data() {
		return {
			loading: false,
			tableData: [],
			summary: {}
		}
	},
	methods: {
		loadData() {
			console.log(this.rowVal)
			this.loading = true
			this.$api
				.getMemberFrozenRebateReportDetailList({
					memberId: this.rowVal.memberId,
					frozenRebatePeriod: this.rowVal.frozenRebatePeriod,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				})
				.then((res) => {
					this.loading = false
					this.tableData = res?.data?.record || []
					this.total = res?.data?.totalRecord || 0
					this.summary = res?.data?.summary || {}
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleClose() {
			this.closeDialog()
		}
	}
}
</script>
<style lang="scss" scoped>
.fenye {
	text-align: center;
}
.fz14 {
	font-size: 14px;
	&::after {
		font-size: 14px;
		color: #909399;
		margin-left: 0px;
	}
}
::v-deep .el-table__body-wrapper {
	overflow-y: auto;
	max-height: 45vh;
}
</style>
